<template>
  <div>
    <puplic-modal
      :publicVisible="publicVisible"
      :title="title"
      modalStyle="addEditSupportModal"
      width="560px"
      @cancel="publicVisible = false"
      @handleOk="handleOk"
    >
      <div slot="content">
        <a-form :form="form" autocomplete="off" class="formStyle" layout="inline">
          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="机关名称">
                <a-input
                  v-decorator="[
                    'policeAgencyName',
                    {
                      rules: [{ required: true, message: '请输入机关名称!' }],
                    },
                  ]"
                  placeholder="请输入机关名称"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="机关编码">
                <a-input v-decorator="['policeAgencyNo']" :maxLength="30" placeholder="请输入机关编码" />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row v-if="records.type == 2" :gutter="24">
            <a-col :span="24">
              <a-form-item label="身份地域码">
                <a-input v-decorator="['idCardRegionCode']" :maxLength="30" placeholder="请输入身份证地域码" />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="上级机关">
                <a-input
                  v-decorator="[
                    'parentPoliceAgencyName',
                    {
                      rules: [{ required: true, message: '请输入上级机关名称!' }],
                    },
                  ]"
                  :disabled="true"
                  placeholder="请输入上级机关"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="发文字号">
                <a-input
                  v-decorator="[
                    'postShopName',
                    {
                      rules: [{ required: true, message: '请输入机关名称!' }],
                    },
                  ]"
                  placeholder="请输入机关名称"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <!-- <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="罚款账户">
                <a-input
                  placeholder="请输入罚款账户"
                  v-decorator="[
                    'penaltyAccount',
                    {
                      rules: [{ required: true, message: '请输入罚款账户!' }],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="收款单位">
                <a-input
                  placeholder="请输入收款单位"
                  v-decorator="[
                    'payee',
                    {
                      rules: [{ required: true, message: '请输入收款单位!' }],
                    },
                  ]"
                />
              </a-form-item>
            </a-col>
          </a-row> -->

          <a-row :gutter="24" class="imageUpload">
            <a-col :span="24">
              <a-form-item label="电子签章">
                <a-upload
                  :customRequest="customRequest"
                  :file-list="fileList"
                  :remove="remove"
                  :showUploadList="showUploadList"
                  accept="image/png, image/JPG,image/jpeg"
                  class="avatar-uploader"
                  list-type="picture-card"
                  @change="uploadChange"
                >
                  <div v-if="fileList.length < 1">
                    <img alt="" class="pictIcon" src="@/assets/imgs/pict-icon.png" />
                    <p class="imgText">点击上传</p>
                  </div>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="4">
            <a-col :span="22">
              <a-form-item label="经度">
                <a-input
                  v-decorator="[
                    'lng',
                    {
                      rules: [{ required: true, message: '请输入纬度!' }],
                    },
                  ]"
                  placeholder="例如104.123456"
                />
              </a-form-item>
            </a-col>
            <a-col :span="2">
              <img
                class="select-map-img cursor"
                src="@/assets/imgs/in-map.png"
                style="width: 36px; height: 36px"
                @click="showMap"
              />
            </a-col>
          </a-row>

          <a-row :gutter="24">
            <a-col :span="24">
              <a-form-item label="纬度">
                <a-input
                  v-decorator="[
                    'lat',
                    {
                      rules: [{ required: true, message: '请输入经度!' }],
                    },
                  ]"
                  placeholder="例如34.865432"
                />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="4">
            <a-col :span="22">
              <a-form-item label="边界">
                <a-input
                  v-decorator="[
                    'areaPosition',
                    {
                      rules: [{ required: true, message: '请输入区域边界坐标!' }],
                    },
                  ]"
                  placeholder="例：lat:104.123456,lng:34.78908"
                />
              </a-form-item>
            </a-col>
            <a-col :span="2">
              <img
                class="select-map-img cursor"
                src="@/assets/imgs/map-area.png"
                style="width: 36px; height: 36px"
                @click="createBorderLine"
              />
            </a-col>
          </a-row>
        </a-form>
      </div>
    </puplic-modal>
    <a-map ref="aMap" :visible.sync="isShowMap" @border="getBorder" @getLatLong="getLatLong"></a-map>
  </div>
</template>
<script>
import { uploadFile, addArea } from '@/api/api'
import { commitTrim } from '@/utils/util'
import AMap from '@/components/a-map/index.vue'
import puplicModal from '@/components/publicModal'
export default {
  components: { puplicModal, AMap },
  name: '',
  data() {
    return {
      title: '新增机关',
      form: this.$form.createForm(this),
      records: {},
      publicVisible: false,
      imageUrl: [],
      fileList: [],
      showUploadList: {
        showPreviewIcon: false,
      },
      isShowMap: false,
    }
  },
  mounted() {},
  methods: {
    add(records) {
      console.log(records, 'records')
      this.records = records
      this.publicVisible = true
      this.fileList = []
      this.$nextTick(() => {
        this.form.setFieldsValue({ ...records })
      })
    },

    remove(file) {
      let uid = file.uid
      let index = this.fileList.findIndex((v) => {
        return v.uid == uid
      })
      this.fileList.splice(index, 1)
      this.imageUrl.splice(index, 1)
    },

    async customRequest(info) {
      const isJpgOrPng =
        info.file.type === 'image/jpeg' || info.file.type === 'image/png' || info.file.type === 'image/jpg'
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpg，png，jpeg格式图片!')
        return
      }

      this.isLt2M = info.file.size / 1024 / 1024 < 2
      if (!this.isLt2M) {
        this.$message.warn('请上传小于200KB的照片!')
      }

      if (isJpgOrPng && this.isLt2M) {
        let file = info.file
        const formData = new FormData()
        formData.append('file', file)
        formData.append('type', 13)
        let res = await uploadFile(formData)
        if (res.code == 200) {
          this.imageUrl.push(res.result.halfPath)
        }
      }
    },
    uploadChange({ file, fileList }) {
      if (this.isLt2M) {
        file.status = 'done'
        this.fileList = fileList
      }
    },

    handleOk() {
      this.form.validateFields(async (err, values) => {
        if (err) {
          return
        }
        if (this.imageUrl.length < 1) {
          this.$message.error('请上传电子签章')
          return
        }
        values.parentId = this.records.key
        values.electronicSignature = this.imageUrl[0]
        await addArea(values)
        this.$emit('ok')
        this.cancel()
      })
    },
    cancel() {
      this.publicVisible = false
      this.form.resetFields()
    },

    // ! 地图方法开始
    showMap() {
      this.isShowMap = true
    },
    getLatLong(value) {
      this.form.setFieldsValue({
        lng: value[0],
        lat: value[1],
      })
    },
    getBorder(value) {
      this.form.setFieldsValue({
        areaPosition: value,
      })
    },
    createBorderLine() {
      this.$refs.aMap.borderLine = true
      this.isShowMap = true
    },
    // ! 地图方法结束
  },
}
</script>
<style lang="less" scoped>
/deep/ .content {
  padding: 20px;
}

.imageUpload {
  margin-bottom: 110px;
  /deep/.avatar-uploader {
    > .ant-upload {
      width: 140px;
      height: 140px;
      background: var(--theme-container-bg);
      border: 1px solid var(--theme-input-border);
    }
  }

  /deep/.ant-upload-select-picture-card {
    width: 140px;
    height: 140px;
  }

  /deep/ .ant-upload-list-item {
    width: 140px;
    height: 140px;
  }

  .imgText {
    color: #1163b8;
    font-weight: 500;
  }

  .pictIcon {
    margin-bottom: 10px;
    width: 42px;
    height: 38px;
  }
}
</style>
